<template>
  <Form ref="pageMetaForm">
    <FormItem>

      <Row type="flex" justify="space-between" class="item-title">
          <H3 >{{getPageMetaShowName(titleName)}}</H3>
          <Checkbox style="font-size: 12px" v-model="pageMetaInfo.title.isUnion">PC/Mobile通用</Checkbox>
        </Row>

      <Row v-if="pageMetaInfo.title.isUnion" class="meta-item">
        <Input type="textarea" class="input_item" v-model.trim="pageMetaInfo.title.value"
               maxlength="65" show-word-limit style="width: 100%" placeholder="通用 SEO title" >
        </Input>
      </Row>
      <div v-else>
        <span class="item_label">PC端：</span>
        <Input type="textarea" v-model.trim="pageMetaInfo.title.pcValue" placeholder="PC端 SEO title" maxlength="65" show-word-limit style="width: 100%"   class="input_item"></Input>
        <span class="item_label">手机端：</span>
        <Input type="textarea" v-model.trim="pageMetaInfo.title.mobileValue" placeholder="手机端 SEO title" maxlength="65" show-word-limit style="width: 100%"  class="input_item"></Input>
      </div>
    </FormItem>



    <FormItem>
      <Row class="item-title"  justify="space-between">
        <H3>{{getPageMetaShowName(descriptionName)}}</H3>
        <Checkbox style="font-size: 12px" v-model="pageMetaInfo.description.isUnion">PC/Mobile通用</Checkbox>
      </Row>
      <div v-if="pageMetaInfo.description.isUnion" class="meta-item">
        <Input type="textarea" v-model.trim="pageMetaInfo.description.value"
               maxlength="320" show-word-limit style="width: 100%" placeholder="通用 SEO description" :rows="4" class="input_item"></Input>
      </div>
      <Row v-else class="meta-item">
        <span >PC端：</span>
        <Input type="textarea" v-model.trim="pageMetaInfo.description.pcValue"
               maxlength="320" show-word-limit style="width: 100%" placeholder="PC端 SEO description" :rows="4" class="input_item"></Input>
        <span >手机端：</span>
        <Input type="textarea" v-model.trim="pageMetaInfo.description.mobileValue"
               maxlength="320" show-word-limit style="width: 100%" placeholder="手机端 SEO description" :rows="4" class="input_item"></Input>
      </Row>
    </FormItem>


    <FormItem>
      <Row class="item-title"  justify="space-between">
        <H3>{{getPageMetaShowName(keywordsName)}}</H3>
        <Checkbox style="font-size: 12px" v-model="pageMetaInfo.keywords.isUnion">PC/Mobile通用</Checkbox>
      </Row>
      <Row v-if="pageMetaInfo.keywords.isUnion" class="meta-item">
        <Input type="textarea" v-model.trim="pageMetaInfo.keywords.value" style="width: 100%" placeholder="通用 SEO keywords"  class="input_item"></Input>
      </Row>
      <Row v-else class="meta-item">
        <span >PC端：</span>
        <Input type="textarea" v-model.trim="pageMetaInfo.keywords.pcValue" placeholder="PC端 SEO keywords" style="width: 100%"  class="input_item"></Input>
        <span >手机端：</span>
        <Input type="textarea" v-model.trim="pageMetaInfo.keywords.mobileValue" placeholder="手机端 SEO keywords" style="width: 100%"  class="input_item"></Input>
      </Row>
    </FormItem>
  </Form>
</template>

<script>
  import pageMetaData from "./js/pageMetaData";
  import {initPageMetaInfo} from "./js/pageMetaFuns";

  export default {
    name: "PageMetaForm",
    props: {
      target: {type: String, required: true},
      pageMetaInfoType: {type: Number, required: true},
      pageMetaInfoList: {type: Array, required: true}
    },
    data() {
      return {
        terminals: pageMetaData.pageMetaDic.terminals,
        pageMetaInfo: pageMetaData.pageMetaInfo,
        titleName: pageMetaData.pageMetaDic.titleName,
        descriptionName: pageMetaData.pageMetaDic.descriptionName,
        keywordsName: pageMetaData.pageMetaDic.keywordsName,
      }
    },
    methods: {
      getPageMetaShowName(name) {
        let element = pageMetaData.pageMetaDic.names.find(element => element.value == name);
        return element==null?"":element.label;
      },
      initPageMetaInfo() {
        initPageMetaInfo(this.target, this.pageMetaInfoType, this.pageMetaInfoList);
      }
    },
    watch: {
      target() {
        this.initPageMetaInfo();
      },
      pageMetaInfoType() {
        this.initPageMetaInfo();
      },
      pageMetaInfoList() {
        this.initPageMetaInfo();
      }
    }
  }
</script>

<style lang="less" scoped>
@import  (once,optional)  "../../css/base.less";

.item-title {
  line-height: 45px;
}

.input_item{
  width:600px;
  @media @mobile{
    width: 280px;
  }
}

.meta-item {
  margin: 0px 0 20px 0;
  .item_label {
    display: inline-block;
    width: 60px;
    text-align: right;
    vertical-align: top;
  }
}
</style>
